<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland-background.png);}
			#mytank{position: absolute;left:10px;top:100px;}
			h1{
				text-align: center;
			}
		</style>
	</head>
	<body>		
		<h1>189000829谭君容</h1>
		<img id="mytank" src="images/up-pic.png"/>
		<script>
			mytank.style="top:0px;left:0px;"//规定坦克的起始位置
			//给body中的内容添加事件
			var tankMove= document.body.onkeyup=function(){
				var current=0;//坦克的旋转角度初始为0
				var top=parseInt(mytank.style.top);
				var left=parseInt(mytank.style.left);
				var code=event.keyCode;
				if(code==37)//向左移动
				{
					current=270;
					mytank.style.transform='rotate('+current+'deg)';//旋转270度使坦克正面向左
					if(left<=0)//判断坦克是否在最左边
					{
						alert("过不去啦")
					}
					mytank.style.left=(left-50)+"px";//没有在最左边就向左移动50个像素
				}
				if(code==38)//向上移动
				{
					current=360;
					mytank.style.transform='rotate('+current+'deg)';//旋转360度使坦克正面向上
					if(top<=0){
						alert("上天啦上天啦")
					}
					mytank.style.top=(top-50)+"px";//没有在最上边就向上移动50个像素
				}
				if(code==39)
				{
					current=90;
					mytank.style.transform='rotate('+current+'deg)';//旋转90度使坦克正面向右
					if(left>=1400)
					{
						alert("最右边了 过去不到了！")
					}
					mytank.style.left=(left+50)+"px";//没有在最右边就向右移动50个像素
				}
				if(code==40)
				{
					current=180;
					mytank.style.transform='rotate('+current+'deg)';//旋转180度使坦克正面向下
					if(top>=600)
					{
						alert("要掉下去啦！")
					}
					mytank.style.top=(top+50)+"px";//没有在最下边就向下移动50个像素
				}
			}
			document.oncontextmenu=function(){
				alert("游戏界面不能使用右键！")
				return false;
			}
		</script>
	</body>
</html>